<template>
  <div>
    <el-tree
      :props="props"
      :load="loadNode"
      lazy
      accordion
      @node-click="nodeClick"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    nodeClick(data, node) {
      console.log(data);
      console.log(node);
      this.$emit("sendTreeData", data);
    },
    // 加载节点
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.$api.getSelectCategory().then(res => {
          console.log(res.data);
          return resolve(res.data.result);
        });
      }
      if (node.level >= 1) {
        // 请求接口
        this.$api.getSelectCategory({ id: node.data.cid }).then(res => {
          console.log(res.data);
          if (res.data.status === 200) {
            return resolve(res.data.result);
          } else {
            return resolve([]);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
